import 'package:flutter/material.dart';

class MyApp5 extends StatelessWidget {
  const MyApp5({super.key});

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        // 这里fontSize的单位和鸿蒙中的vp类似，在不同的设备上显示不同的大小
        title: Text(
          'Container组件',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      body: Center(
        child: Container(
          // color: Colors.green, 
          width: screenSize.width * 2 / 3,
          height: screenSize.height / 3,
          // 设置装饰效果
          decoration: BoxDecoration(
            // 注意：一旦设置了decoration，背景色必须写在这里面
            color: Colors.green,
            border: Border(top: BorderSide(color: Colors.teal, width: 5)),
            borderRadius: BorderRadius.only(topLeft: Radius.circular(10)),
          ),
          child: Container(
            margin: EdgeInsets.only(top: 20, left: 40),
            padding: EdgeInsets.all(30),
            color: Colors.yellow,
            // 设置对齐方式
            alignment: Alignment.center,
            child: Text('我是一个Container容器'),
          ),
        ),
      ),
    );
  }
}
